<template>
  <!-- 首页墙的列表展示组件 -->
  <div>
    <!-- 展示区域 -->
    <div>
      <div class="container" v-for="item in worksData" :key="item.id">
        <div class="headerimg">
          <!-- 有头像则显示 -->
          <img v-lazy="item.user_pic" v-if="item.user_pic" @click="checkimg(item.user_pic)"/>
          <div class="anonymity" v-else>匿名</div>
        </div>
        <div class="content">
          <!-- 详细个人消息 -->
          <div class="userinfo">
            <h3 @click="visithome(item)" title="访问该主页">{{item.nickname?item.nickname:'匿名' }}</h3>
            <p class="timer">
              <a>{{timer(item.timer)}}</a> 来自
              <a>{{item.from?item.from:'匿名'}}</a>
            </p>
            <p class="type">#{{item.def_type?item.def_type:item.cha_types}}#</p>
          </div>
          <div class="message">
            <p>{{item.message}}</p>
          </div>
          <div class="picture" v-if="item.pic_walls">
            <div class="box-item" v-for="(subItem,i) in item.pic_walls" :key="i">
              <img v-lazy="subItem" @click="checkimg(subItem)" />
            </div>
          </div>
          <!-- 底部评论 -->
          <FooterReply :item="item"></FooterReply>
        </div>
      </div>
    </div>
    <!-- 图片放大对话框 -->
    <el-dialog title="查看" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="checkimg" v-if="checkimgurl">
        <img :src="checkimgurl" alt="图片" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import FooterReply from "@/views/footerReply/index.vue";
export default {
  props: ["worksData"],
  data() {
    return {
      dialogVisible: false, //图片放大对话框的显示与隐藏
      checkimgurl: undefined, //放大的图片地址
    };
  },
  methods: {
    // 关闭对话框的回调
    handleClose(done) {
      done();
    },
    // 查看放大图片
    checkimg(img) {
      this.dialogVisible = true; //打开对话框
      this.checkimgurl = img; //赋值
    },
    // 访问首页
    visithome(item) {
      //  判断
      if (item.uuId === this.userinfo.uuId)
        return this.$message("访问的人是自己哦");
      // 跳转到主页
      this.$router.push({
        name: "/mine",
        params: { uuId: item.uuId },
      });
    },
  },
  components: {
    FooterReply,
  },
  computed: {
    // 解决mysql返回值带z带t问题
    timer() {
      return (timer) => {
        return dayjs(timer).format("YYYY-MM-DD HH:mm:ss");
      };
    },
    // vuex中的个人信息
    userinfo() {
      return this.$store.state.user.userinfo;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: start;
  padding: 10px 0;
  border-bottom: 1px solid #008c8c;
  .headerimg {
    width: 50px;
    height: 50px;
    padding-right: 10px;
    img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
    .anonymity {
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 50%;
      background: #8590a6;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      margin-right: 10px;
    }
  }
  .content {
    .userinfo {
      h3 {
        font-size: 16px;
        font-weight: 700;
      }
      .timer {
        font-size: 12px;
        color: #8590a6;
      }
      .type {
        font-size: 14px;
        color: #008c8c;
      }
    }
    .message {
      max-width: 638px;
      padding-right: 20px;
      box-sizing: border-box;
      // 允许长单词换行到下一行：
      word-wrap: break-word;
      // nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
      // pre-wrap	保留空白符序列，但是正常地进行换行。
      // pre-line	合并空白符序列，但是保留换行符。
      white-space: pre-wrap;
      p {
        text-indent: 2em;
      }
    }
    .picture {
      max-width: 638px;
      padding: 10px 20px 20px 0;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      .box-item {
        width: 33.3333%;
        padding-left: 0.25rem;
        padding-top: 0.25rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
    }
  }
}
.checkimg {
  width: 100%;
  height: 100%;
  text-align: center;
  img {
    border-radius: 10px;
    width: 100%;
    height: auto;
  }
}
/deep/.el-dialog__body {
  padding-top: 0;
}
</style>